<!--
 * @FilePath: LayerFlex.vue
 * @Author: jack
 * @Date: 2024-05-14 08:31:19
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-08-01 09:51:59
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="main-container row layer-flex-box">
        <div class="content-common-box" style="margin-right:15px;width:240px;">
            <div class="after-title-box" v-if="isShowTitle">
                <div class="titleFlex">
                    <div>{{ title }}</div>
                    <slot name="titleButton"></slot>
                </div>
                <slot name="button"></slot>
            </div>
            <div class="list-box">
                <slot name="listBox"></slot>
            </div>
        </div>
        <div class="content-common-box content-common-box2">
            <!-- <div class="common-title">
                <slot name="title"></slot>
            </div> -->
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
interface PropsType {
    // 标题
    title?: string
    // 是否显示标题
    isShowTitle?: boolean
    // 是否显示确认按钮
    isShowConfire?: boolean
    // 取消按钮文字
    refreshText?: string
    // 确认按钮文字
    saveText?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    title: '',
    isShowTitle: true,
    isShowConfire: true,
    refreshText: '重置',
    saveText: '保存更改'
})
const emit = defineEmits<EmitType>()
interface EmitType {
    // (e: 'refreshChild'): void
    // (e: 'saveChange'): void
}
onMounted(() => { })
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.layer-flex-box {
    height: 100%;
    background-color: #F3F5F8;

    .content-common-box {
        width: 100%;
        height: 100%;
        padding: 20px;
        // overflow-y: scroll;
        box-sizing: border-box;
        background-color: #ffffff;
        position: relative;

        .common-title {
            font-weight: bold;
            border-bottom: 1px solid #E1E1E1;
            padding-bottom: 15px;
            font-size: 16px;
            color: #333;
        }

        .after-title-box {
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            position: relative;
            font-size: 16px;

            .titleFlex {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .list-box {
            .view-flex-box {
                width: 100%;
                text-align: center;
                height: 40px;
                line-height: 38px;
                box-sizing: border-box;
                cursor: pointer;
                margin-bottom: 10px;
                border-radius: 2px;
                border: 1px solid #E4E4E4;
                border-radius: 2px;
                color: #626264;
                font-size: 14px;
                box-sizing: border-box;
            }

            .view-flex-box:hover {
                background: #FFF1F1;
                border: 1px solid #B52427;
                color: #B52427;
            }

            .view-flex-box.active {
                color: #B52427;
                background: #FFF1F1;
                border: 1px solid #B52427;
            }
        }
    }

    .content-common-box2 {
        background: #F5F5F5;
        padding: 0px;
        flex:1;
    }
}
</style>